<template>
  <view class="setting-page">
    <view style="height: 10upx;background-color: #F3F3F3;">

    </view>
    <view class="setting-module">
      <view class="setting-item border-bottom">
        <text class="setting-item-title">头像</text>
        <view
          class="setting-item-content"
          @tap="skipToModifyPage"
        >
          <text
            v-if="image=='' || image == 'undefined'"
            class="iconfont icon-morentouxiang"
            style="font-size: 52upx;"
          ></text>
          <!--<text class="iconfont icon-right"></text>-->
          <image
            v-else
            :src="image"
            style="width: 90upx;height: 90upx;margin-top: 8px;border-radius: 50%;"
          ></image>
        </view>
      </view>
      <view
        class="setting-item"
        style="border-color: #DDDDDDD!important;"
      >
        <text class="setting-item-title">昵称</text>
        <view class="setting-item-content">
          <input
            type="text"
            v-model="nickName"
            style="text-align: right;"
          >
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">性别</view>
        <picker
          @change="sexPickerChange"
          :value="sexIndex"
          :range="sexPicker"
        >
          <view class="picker">
            {{sexIndex>-1?sexPicker[sexIndex]:'请选择'}}
          </view>
        </picker>
      </view>
      <view class="cu-form-group">
        <view class="title">生日</view>
        <picker
          mode="date"
          :value="date"
          start="2015-09-01"
          end="2020-09-01"
          @change="DateChange"
        >
          <view class="picker">
            {{date}}
          </view>
        </picker>
      </view>
      <view class="setting-item">
        <text class="setting-item-title">简介</text>
        <view class="setting-item-content">
          <input
            type="text-area"
            v-model="intro"
            style="text-align: right;"
          >
        </view>
      </view>
    </view>
    <view
      class="save-btn"
      @tap="saveUserInfo"
    >保存</view>
    <!--<view class="setting-module" style="margin-top: 20upx;border-color: #DDDDDDD!important;">-->
    <!--<view class="setting-item border-bottom">-->
    <!--<text class="setting-item-title">职业</text>-->
    <!--<view class="setting-item-content">-->
    <!--<text>请选择</text>-->
    <!--<text class="iconfont icon-right"></text>-->
    <!--</view>-->
    <!--</view>-->
    <!--<view class="setting-item">-->
    <!--<text class="setting-item-title">行业</text>-->
    <!--<view class="setting-item-content">-->
    <!--<text>请选择</text>-->
    <!--<text class="iconfont icon-right"></text>-->
    <!--</view>-->
    <!--</view>-->
    <!--</view>-->
  </view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
  data() {
    return {
      mobile: '',
      sexPicker: ["女", "男"],
      sexIndex: -1,
      date: '2000-01-01',
      nickName: '',
      intro: '',
      image: ''
    }
  },
  computed: {
    diyMobile() {
      if (this.mobile) {
        return this.mobile.slice(0, 3) + '****' + this.mobile.slice(6)
      } else {
        return ''
      }
    }
  },
  // 导航栏自定义按钮点击事件
  onNavigationBarButtonTap(e) {
    alert("到头")
    console.log(e);
    if (e.type === 'back') {
      uni.switchTab({
        url: '/pages/mine/new_mine'
      })
    }
  },
  onLoad() {
    this.initInfo()
  },
  methods: {
    sexPickerChange(e) {
      this.sexIndex = e.detail.value;
      // this.saveUserInfo();
    },
    DateChange(e) {
      this.date = e.detail.value;
      // this.saveUserInfo();
    },
    initInfo() {
      let token = uni.getStorageSync("token");
      api.request({
        url: '/user/info',
        data: {
          token: token
        }
      })
        .then(response => {
          this.mobile = response.mobile;
          this.nickName = response.realname;
          if (response.gender && response.gender == '男') {
            this.sexIndex = 1;
          }
          if (response.gender && response.gender == '女') {
            this.sexIndex = 0;
          }
          this.intro = response.intro;
          this.date = response.birthday;
          this.image = response.userImg
        })
        .catch(err => {
          console.log(err);
        });
    },
    skipToModifyPage() {
      let token = uni.getStorageSync('token');
      if (token) {
        let that = this
        uni.chooseImage({
          success: function (chooseImageRes) {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            console.log(tempFilePaths);
            uni.uploadFile({
              url: 'http://www.creb.com.cn/api/front/mobile/upload',
              filePath: tempFilePaths[0],
              name: 'uploadFile',
              success: (uploadFileRes) => {
                // alert("上传文件成功：" + uploadFileRes.data.body)
                that.image = JSON.parse(uploadFileRes.data).body
              }
            });
          }
        });
      } else {
        uni.showToast({
          title: "您尚未登录"
        })
      }
    },
    skipToEditPage(flag) {

    },
    saveUserInfo() {
      let token = uni.getStorageSync('token');
      if (!token) {
        return;
      }
      api.request({
        url: '/user/save',
        method: 'POST',
        data: {
          token: token,
          headImage: this.headImage,
          nick: this.nickName,
          gender: this.sexIndex,
          birthday: this.date,
          intro: this.intro,
          userImg: this.image
        }
      })
        .then(response => {
          uni.showToast({
            title: '保存成功',
            icon: 'none'
          });
          console.log("save user info success")
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
}
</script>

<style scoped>
@import "../../../colorui/main.css";
@import "../../../colorui/icon.css";

.cu-form-group .title {
  min-width: calc(4em + 15px);
}

.setting-page {
  height: 100%;
  background-color: #f3f3f3;
}

.setting-module {
  display: flex;
  flex-direction: column;
  /* padding: 0 30upx;
		width: 690upx; */
  background-color: #ffffff;
  color: #333333;
}

.setting-item {
  height: 100upx;
  width: 100%;
  padding: 0 30upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-item-title {
  font-size: 30upx;
  color: #333333;
}

.setting-item-content {
  color: #999999;
  font-size: 30upx;
}

.custom-btn {
  width: 100%;
  height: 100upx;
  text-align: center;
  line-height: 100upx;
  background-color: #ffffff;
  color: #ff5d5d;
  margin-top: 198upx;
  font-size: 30upx;
}

.save-btn {
  box-shadow: 0 0 5px 0 #f1f1f1;
  width: 90%;
  margin: 0 auto;
  height: 55px;
  text-align: center;
  line-height: 55px;
  background-color: #ffffff;
  font-family: PingFangSC-Regular;
  color: #262626;
  font-weight: bold;
  margin-top: 22px;
  font-size: 17px;
}
</style>
